<template>
   <div class="page">
		<span class="rem_time" style="color: orange;border-width: 1px;border-style: solid;border-color: orange; " @click="gotoPay">{{remaining}}</span>
		<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
   </div>
</template>

<script>
	import alertTip from '../../components/common/alertTip';
   export default {
   		components: {alertTip},
	   data () {
	   return {
	   		countNum: 900,
	   		showAlert: false,
	   		alertText: null
	   }
   },
   mounted(){
   		this.countNum -= this.numTime;
   },
   // 接收一个父参数
   props: ['time'];
   methods: {
   		closeTip(){
   			this.$emit('closeTip');
   		}
   		// 计算时间
   		remainingTime(){
   			clearInterval(this.timer);
   			this.timer = setInterval(() => {
   				this.countNum--;
   				if(this.countNum == 0){
   					clearInterval(this.timer);
   					this.showAlert = true;
   					this.alertText = '支付超时';
   				}
   			}, 1000);
   		},
   		gotoPlay(){
   			this.showAlert = truw;
   			this.alertText = '暂不支持支付接口'
   		}
   },
   computed: {
   	
   }
 }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';
	.page{
        display: inline-block;
        .rem_time{
            @include sc(.55rem, orange);
            padding: .1rem .2rem;
            border-radius: .15rem;
        }
    }
</style>